import style from '@/assets/components.module.scss';

import { Comment, Question, TopNavigate, Trends } from '@/components';
import { HttpResponse } from '@/utils';

export interface ProjectProps {
    children?: string | React.ReactElement | React.ReactElement[];
}

function Project({ children }: ProjectProps) {
    const history = withRouter();
    const { id } = useParams();

    // 根据id请求景点信息
    const { data: res } = useSwr<
        HttpResponse<{
            place: {
                address: string;
                city: string;
                id: number;
                img: string;
                msg: string;
                name: string;
                openTime: string;
                price: number;
                province: string;
            };
            qus: { id: number; title: string; count: number }[];
        }>
    >(`place?pid=${id}`, axios.get);

    return (
        <>
            <div className={style['place']}>
                <TopNavigate />
                <div className={style['img']}>
                    <img src={res?.data.place.img} alt='' />
                </div>

                <ul className={style['ul']}>
                    <div>
                        <div>
                            {res?.data.place.province} - {res?.data.place.city}
                        </div>
                        <div>{res?.data.place.openTime}</div>
                        <div>{res?.data.place.address}</div>
                    </div>
                    <div>
                        <div>点评</div>
                        <div>
                            {/* <Comment.list limit={20} /> */}
                            <Comment.list
                                limit={2}
                                id={parseInt(id ? id : '0')}
                            />
                        </div>
                        <div
                            className={style['see-more']}
                            onClick={() =>
                                history.push(`/comments/${res?.data.place.id}`)
                            }>
                            查看全部
                        </div>
                    </div>
                    <div>
                        <div
                            className={style['title']}
                            onClick={() => history.push(`/question`)}>
                            问答
                        </div>
                        <div>
                            <Question.list list={res?.data.qus} />
                        </div>
                    </div>

                    <div>
                        <div className='mb-3'>推荐</div>
                        <div>
                            <Trends />
                        </div>
                    </div>
                </ul>

                {/* <div className={style['see']}>
                    <div>
                        ￥ <span>{res?.data.place.price ?? 0}</span>
                    </div>
                    <div className={style['gone']}>
                        <span>去过</span>
                    </div>
                </div> */}
            </div>
        </>
    );
}

export default Project;
